<template>
    <div class="goodsindex">

        <!-- 检索结果 -->
        <el-row :gutter="20" class="goodsindex-list">
            <el-col :span="24">
                <el-table :data="tableData" border size='small' style="width: 100%">
                    <el-table-column type="index" :index="indexMethod" label="序号" width="50">
                    </el-table-column>
                    <el-table-column prop="settingName" label="配置名" width="200">
                    </el-table-column>
                    <el-table-column prop="settingValue" label="配置值" width="400">
                    </el-table-column>
                    <el-table-column prop="settingCode" label="编号" width="180">
                    </el-table-column>
                    <el-table-column prop="order" label="排序号" width="80">
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle size="small"
                                @click="gotoDetail(scope.row.setId)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle size="small"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 分页 -->

        <el-row :gutter="20" class="goodsindex-list">
            <el-col :span="24" class="goodsindex-page-box">
                <el-pagination :page-size="pageSize" :current-page="pageNum" @current-change="handleCurrentChange"
                    class="article_pagination" background layout="prev, pager, next" :total="totalSize"></el-pagination>
            </el-col>
        </el-row>

        <el-dialog title="配置详情" :visible.sync="settingShow">
            <el-form :model="setting">
                <el-form-item label="配置名称" label-width="120px" prop="settingName">
                    <el-input v-model="setting.settingName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="配置值" label-width="120px" prop="settingValue">
                    <el-input v-model="setting.settingValue" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="编号" label-width="120px" prop="settingCode">
                    <el-input v-model="setting.settingCode"></el-input>
                </el-form-item>
                <el-form-item label="排序号" label-width="120px" prop="order">
                    <el-date-picker v-model="setting.order" type="date"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="SaveDetail()" type="primary">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getSettingList, getSettingDetail, updateSettingDetail } from '@/assets/api/utils.js'
export default {
    data() {
        return {
            name: '',
            pageNum: 1,
            pageSize: 10,
            totalSize: 0,
            tableData: [],
            setting: {},
            settingShow: false
        }
    },
    created() {
        this.searchSetting();
    },
    methods: {

        handleCurrentChange(val) {
            var value = { "pageNum": val, "pageSize": this.pageSize, "travelName": this.name };
            getSettingList(value).then((resp) => {
                this.tableData = resp.data.content;
                this.totalSize = resp.data.totalSize;
            })
        },
        async searchSetting() {
            var value = { "pageNum": this.pageNum, "pageSize": this.pageSize, "travelName": this.name, };
            getSettingList(value).then((resp) => {
                this.tableData = resp.data.content;
                this.totalSize = resp.data.totalSize;
            })
        },

        indexMethod(index) {
            return index + 1;
        },
        async gotoDetail(data) {
            getSettingDetail(data).then((resp) => {
                if (resp.code == 200) {
                    this.setting = resp.data
                }
            })
            this.settingShow = true;
        },
        async SaveDetail() {
            updateSettingDetail(this.setting).then((resp) => {

            })
        },
    }
}
</script>

<style scoped>
.goodsindex {
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
}

/* 搜索 */
.goodsindex-queryInfo {
    margin-bottom: 10px;
}

.goodsindex-queryInfo-li {
    width: 100%;
    height: auto;
}

/* 列表 */
.goodsindex-list {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/* 分页 */
.goodsindex-page-box {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}
</style>